<!--

/*
* Copyright (C) 2005-2013 University of Sydney
*
* Licensed under the GNU License, Version 3.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.gnu.org/licenses/gpl-3.0.txt
*
* Unless required by applicable law or agreed to in writing, software distributed under the License
* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing permissions and limitations under
* the License.
*/


/**
* brief description of file   
* 
* @author      Tom Murtagh
* @author      Kim Jackson
* @author      Ian Johnson   <ian.johnson@sydney.edu.au>
* @author      Stephen White   <stephen.white@sydney.edu.au>
* @author      Artem Osmakov   <artem.osmakov@sydney.edu.au>
* @copyright   (C) 2005-2013 University of Sydney
* @link        http://Sydney.edu.au/Heurist
* @version     3.1.0
* @license     http://www.gnu.org/licenses/gpl-3.0.txt GNU License 3.0
* @package     Heurist academic knowledge management system
* @subpackage  !!!subpackagename for file such as Administration, Search, Edit, Application, Library 
*/


-->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name = "description" content = "Online tool to create code for polyline and polygon to Google Maps v3 (version 3)"/>
	<title>Heurist digitizer</title>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="../../../records/edit/digitizer/digitizer.js"></script>
	<link rel="stylesheet" type="text/css" href="digitizer.css"/>
	<link rel="stylesheet" type="text/css" href="../../../common/css/global.css"/>


	<script type="text/javascript">

	</script>


	<link href="../../../external/jquery/jquery-ui-1.8.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="../../../external/jquery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="../../../external/jquery/jquery-ui-1.8.13.custom.min.js"></script>

	<script type="text/javascript" src="../../../external/timemap.2.0/lib/mxn/mxn.js?(googlev3)"></script>
	<script type="text/javascript" src="../../../external/timemap.2.0/lib/markerclusterer.js"></script>
	<!-- script type="text/javascript" src="../../../external/timemap.2.0/lib/timeline/timeline-api.js?bundle=true"></script -->

	<script src="../../../external/timemap.2.0/src/timemap.js" type="text/javascript"></script>
	<!-- <script src="../../../external/timemap.2.0/src/param.js" type="text/javascript"></script>
	<script src="../../../external/timemap.2.0/src/manipulation.js" type="text/javascript"></script>
	script src="../../../external/timemap.2.0/src/loaders/xml.js" type="text/javascript"></script>
	<script src="../../../external/timemap.2.0/src/loaders/kml.js" type="text/javascript"></script -->

	<script src="../../../viewers/map/mapping.js" type="text/javascript"></script>

</head>

<body id="body" width="780" height="600" class="popup" style="margin: 5px; padding: 0; overflow:hidden;" onload="initmap('map_digitizer')">
<!--
<script type="text/javascript" src="../../../common/js/utilsUI.js"></script>
<script src="../../../common/php/displayPreferences.php"></script>
-->

<div style="width:100%;">
    <div id="middlerow" style="float:left;">
	    <form style="float:left;margin-right:5px" action="#" onsubmit="searchAddress(this.address.value); return false">
		    <input type="text" style="border: 1px solid #000000;" size="40" name="address" value="Arts eResearch, University of Sydney" />
		    <input type="submit" value="Find" />
	    </form>

			<label>Background:</label>
			<select id="cbLayers" style="border:1px solid #000000;width:180px;display:inline-block;" onchange="loadLayer(event)"></select>


	        <div style="display:none;">
	        	<input type="button" onclick="mapcenter();" value="Mapcenter"/>
	        	<input type="text" style="width:140px; border: 1px solid #000000;" id="centerofmap" />
	        	Zoom level:
	        	<input type="text" size="5" name="myzoom" id="myzoom" value="12" style="width:15px; border: 1px solid #000000;" />
	        </div>

    </div>
</div>

<div id="map_digitizer"></div>

<div id="buttonrow" style="width:135px;float:right">

	<select id="over" style="width:130px; margin-left: 5px; border:1px solid #000000;">
		<option>Long, Lat</option>
		<option selected="selected">Lat, Long</option>
	</select>

    <div class="topbutton" style="margin-top: 20px;">
        <select id="toolchoice" name="toolchoice" style="border:1px solid #000000;width:130px;" onchange="newToolID=parseInt(this.options[this.selectedIndex].value);setTool(newToolID);">
        <option selected="selected" value="5">Marker</option>
        <option value="1">Polyline</option>
        <option value="2">Polygon</option>
        <option value="3">Rectangle</option>
        <option value="4">Circle</option>
        <!-- option value="6">Directions</option -->
        </select>
    </div>

    <div class="topbutton">
 	   <input type="button" id="btnSave" disabled="disabled"
	   		style="font-weight: bold;width:130px; color: black;" value="Save" onclick="closeWithValue();"/>
    </div>

    <div class="topbutton">  <!-- disabled="disabled"  -->
 	   <input type="button" id="btnSaveExtent" style="width:130px;" value="Remember view" onclick="keepExtent();"/>
    </div>

    <div class="topbutton">
        <input type="button" id="btnDelLastPoint" onclick="deleteLastPoint();"
        	value="Delete Last" style="width:130px;visibility:hidden;"/>
    </div>

    <div class="topbutton">
        <input type="button" id="btnEditPoly" onclick="editlines();" value="Edit shape"
        	style="width:130px;visibility:hidden;"/>
    </div>

    <div class="topbutton">
        <input type="button" onclick="clearMap();" value="Clear Shape" style="width:130px;"/>
    </div>


    <div>
    	&nbsp;
    </div>

    <div class="topbutton">

<textarea id="coords1" cols="2" rows="2">
Click on the map. The code for the shape you create will be presented here.
</textarea>
    </div>

    <div class="topbutton">
 	   <input type="button" id="btnSaveChanges" style="width:130px;" value="Apply coords" onclick="applyManualEntry();"
 	   			title="Type in coordinates into text area above and click this button to apply changes"/>
    </div>
    <div class="help prompt" style="padding:4px;">
    	Click to mark, press and drag to move map
    </div>

    <!-- this buttons not used -->
    <div class="choice" style="display:none;">
        <form id="codes" style="float:left;text-align:right;padding-top:10px;" action="./" method="post" onsubmit="return false">
        <select id="codechoice" name="codechoice" style="border:1px solid #000000;" onchange="codeID=parseInt(this.options[this.selectedIndex].value);setCode();">
  		<option selected="selected" value="0">Text</option>
        <option value="1">KML</option>
        <option value="2">Javascript</option>
        </select>
        </form>
    </div>
    <div class="topbutton" style="display:none;">
        <input type="button" onclick="nextshape();" value="Next shape"/>
    </div>
    <div class="topbutton" style="display:none;">
        <input type="button" onclick="showKML();" value="Show KML"/>
    </div>
</div>


<!-- for polygon with holse - not used -->
<div id="polygonstuff">
    <div>
        <a style="padding-left:5px; color: #ffffff;" href="javascript:holecreator()">Hole</a>
    </div>
    <div id="stepdiv" style="padding-left:5px">
        Step 0
    </div>
    <div>
        <input id="multipleholes" type="button" onclick="nexthole();" value="Next hole"/>
    </div>
</div>

</body>

</html>
